<template>
  <div class="container">
    <div style="display: flex">
      <div class="echarts_type_1" ref="echarts3"></div>
      <div class="echarts_type_1" ref="echarts2"></div>
    </div>
    <div class="echarts_type_2" ref="echarts1"></div>
    <div class="echarts_type_2" ref="echarts4"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import {onMounted, ref} from 'vue';

/**
 * 折线
 */
const echarts1 = ref(null);
const echarts1_create = () => {
  const myChart = echarts.init(echarts1.value, 'dark');
  const option = {
    title: {
      text: 'Stacked Line'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Union Ads',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'Video Ads',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: 'Direct',
        type: 'line',
        stack: 'Total',
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: 'Search Engine',
        type: 'line',
        stack: 'Total',
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  };
  myChart.setOption(option)
}
/**
 * 柱状
 */
const echarts2 = ref(null);
const echarts2_create = () => {
  const myChart = echarts.init(echarts2.value, 'dark');
  const option = {
    dataset: {
      source: [
        ['score', 'amount', 'product'],
        [89.3, 58212, 'Matcha Latte'],
        [57.1, 78254, 'Milk Tea'],
        [74.4, 41032, 'Cheese Cocoa'],
        [50.1, 12755, 'Cheese Brownie'],
        [89.7, 20145, 'Matcha Cocoa'],
        [68.1, 79146, 'Tea'],
        [19.6, 91852, 'Orange Juice'],
        [10.6, 101852, 'Lemon Juice'],
        [32.7, 20112, 'Walnut Brownie']
      ]
    },
    grid: {containLabel: true},
    xAxis: {name: 'amount'},
    yAxis: {type: 'category'},
    visualMap: {
      orient: 'horizontal',
      left: 'center',
      min: 10,
      max: 100,
      text: ['High Score', 'Low Score'],
      // Map the score column to color
      dimension: 0,
      inRange: {
        color: ['#65B581', '#FFCE34', '#FD665F']
      }
    },
    series: [
      {
        type: 'bar',
        encode: {
          // Map the "amount" column to X axis.
          x: 'amount',
          // Map the "product" column to Y axis
          y: 'product'
        }
      }
    ]
  };
  myChart.setOption(option)
}
/**
 * 多个雷达
 */
const echarts3 = ref(null);
const echarts3_create = () => {
  const myChart = echarts.init(echarts3.value, 'dark');
  const option = {
    title: {
      text: 'Multiple Radar'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      left: 'center',
      data: [
        'A Software',
        'A Phone',
        'Another Phone',
        'Precipitation',
        'Evaporation'
      ]
    },
    radar: [
      {
        indicator: [
          {text: 'Brand', max: 100},
          {text: 'Content', max: 100},
          {text: 'Usability', max: 100},
          {text: 'Function', max: 100}
        ],
        center: ['25%', '40%'],
        radius: 80
      },
      {
        indicator: [
          {text: 'Look', max: 100},
          {text: 'Photo', max: 100},
          {text: 'System', max: 100},
          {text: 'Performance', max: 100},
          {text: 'Screen', max: 100}
        ],
        radius: 80,
        center: ['50%', '60%']
      },
      {
        indicator: (function () {
          var res = [];
          for (var i = 1; i <= 12; i++) {
            res.push({text: i + '月', max: 100});
          }
          return res;
        })(),
        center: ['75%', '40%'],
        radius: 80
      }
    ],
    series: [
      {
        type: 'radar',
        tooltip: {
          trigger: 'item'
        },
        areaStyle: {},
        data: [
          {
            value: [60, 73, 85, 40],
            name: 'A Software'
          }
        ]
      },
      {
        type: 'radar',
        radarIndex: 1,
        areaStyle: {},
        data: [
          {
            value: [85, 90, 90, 95, 95],
            name: 'A Phone'
          },
          {
            value: [95, 80, 95, 90, 93],
            name: 'Another Phone'
          }
        ]
      },
      {
        type: 'radar',
        radarIndex: 2,
        areaStyle: {},
        data: [
          {
            name: 'Precipitation',
            value: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3
            ]
          },
          {
            name: 'Evaporation',
            value: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3
            ]
          }
        ]
      }
    ]
  };
  myChart.setOption(option)
}
/**
 * 折线
 */
const echarts4 = ref(null);
const echarts4_create = () => {
  const myChart = echarts.init(echarts4.value, 'dark');
  const option = {
    title: {
      text: 'Stacked Area Chart'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Union Ads',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'Video Ads',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: 'Direct',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: 'Search Engine',
        type: 'line',
        stack: 'Total',
        label: {
          show: true,
          position: 'top'
        },
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  };
  myChart.setOption(option)
}
onMounted(() => {
  echarts1_create()
  echarts2_create()
  echarts3_create()
  echarts4_create()
});
</script>

<style scoped lang="scss">
.container {
  padding-top: 10px;
}

.echarts_type_1 {
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  background-color: #100c2a;
  height: 400px;
  width: 47%;
}

.echarts_type_2 {
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  background-color: #100c2a;
  height: 400px;
  width: 97%;
}
</style>
